<template>
  <div class="promote-order-number">
    <div>
      <el-form>
        <!-- <el-form-item label="时间段：">
          <el-select v-model="searchForm.timeType" placeholder="请选择时间段" size="small">
            <el-option v-for="(item, index) in timeTypeData" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="推广员账号："><el-input placeholder="请输入手机号" v-model="searchForm.phone" size="small" clearable></el-input></el-form-item>
        <el-form-item><el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button></el-form-item>
      </el-form>
    </div>
    <!-- <div class="commissionText">
      <span style="margin-right: 30px;">{{ timeTypeText[searchForm.timeType] + '订单数：' + allOrderCount }}</span>
      <span style="margin-right: 30px;">{{ timeTypeText[searchForm.timeType] + '佣金：' + allCommission }}</span>
      <span>{{ timeTypeText[searchForm.timeType] + '关联佣金：' + linkCommission }}</span>
    </div> -->
    <div>
      <el-button class="add-btn" @click="showDialog">新增推广员</el-button>
    </div>
    <div>
      <el-table :data="tableData" border>
        <el-table-column prop="name" label="推广员姓名"></el-table-column>
        <el-table-column prop="phone" label="推广员账号"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <!-- <el-table-column prop="link_commission" label="关联佣金">
          <div slot-scope="scope">
            <div style="color: red;">{{scope.row.link_commission}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="order_count" label="昨日订单数"></el-table-column>
        <el-table-column prop="yesterday_all_commission" label="昨日佣金"></el-table-column> -->
        <el-table-column prop="commission" label="佣金余额"></el-table-column>
        <el-table-column prop="history_commission" label="累计佣金"></el-table-column>
        <el-table-column prop="bank_account" label="提现账户名"></el-table-column>
        <el-table-column prop="bank_name" label="提现账号"></el-table-column>
        <el-table-column prop="we_chat" label="微信号"></el-table-column>
        <el-table-column prop="qq" label="QQ号"></el-table-column>
        <el-table-column prop="status" :formatter="getStatusText" label="当前状态"></el-table-column>
        <el-table-column prop="product_id" label="操作">
          <div slot-scope="scope">
            <div><el-button class="edit-btn" @click="showRemarkDialog(scope.row)">编辑</el-button></div>
            <div><el-button class="login-btn" @click="forceLogin(scope.row)">登陆</el-button></div>
          </div>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑备注" :visible.sync="remarkDialog" width="500px">
        <div>
          <el-form :model="editRemark" :rules="remarkRules" ref="editRemark">
            <el-form-item label="备注：" prop="remark"><el-input placeholder="请输入备注" v-model="editRemark.remark" size="small" clearable></el-input></el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="remarkDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitRemark">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="新增推广员" :visible.sync="isShowPromoteDialog" width="500px" class="add-promote-dialog">
        <div style="height: 400px;overflow-y: scroll;">
            <el-form :model="addPromoteForm" :rules="addPromoteRules" ref="addPromoteForm">
                <el-form-item label="淘宝方案：" v-if="isShowScheme[1]">
                  <el-select v-model="addPromoteForm.tbScheme" placeholder="请选择淘宝方案" size="small">
                    <el-option v-for="(item, index) in schemeList.tb" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="天猫方案：" v-if="isShowScheme[2]">
                  <el-select v-model="addPromoteForm.tmScheme" placeholder="请选择天猫方案" size="small">
                    <el-option v-for="(item, index) in schemeList.tm" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="1688方案：" v-if="isShowScheme[4]">
                  <el-select v-model="addPromoteForm.albbScheme" placeholder="请选择1688方案" size="small">
                    <el-option v-for="(item, index) in schemeList.albb" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="京东方案：" v-if="isShowScheme[3]">
                  <el-select v-model="addPromoteForm.jdScheme" placeholder="请选择京东方案" size="small">
                    <el-option v-for="(item, index) in schemeList.jd" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="唯品会方案：" v-if="isShowScheme[13]">
                  <el-select v-model="addPromoteForm.vipScheme" placeholder="请选择唯品会方案" size="small">
                    <el-option v-for="(item, index) in schemeList.vip" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="拼多多方案：" v-if="isShowScheme[15]">
                  <el-select v-model="addPromoteForm.pddScheme" placeholder="请选择拼多多方案" size="small" >
                    <el-option v-for="(item, index) in schemeList.pdd" :key="index" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              <el-form-item label="抖音方案：" v-if="isShowScheme[20]">
                <el-select v-model="addPromoteForm.dyScheme" placeholder="请选择抖音方案" size="small" >
                  <el-option v-for="(item, index) in schemeList.dy" :key="index" :label="item.title" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="姓名:" prop="name">
                    <el-input placeholder="请输入姓名" type="text" v-model="addPromoteForm.name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号(账号):" prop="phone">
                    <el-input placeholder="请输入手机号" type="text"  v-model="addPromoteForm.phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input placeholder="请输入密码" type="text"  v-model="addPromoteForm.password" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="微信号:" prop="weChat">
                    <el-input placeholder="请输入微信号" type="text"  v-model="addPromoteForm.weChat" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="qq号:" prop="qq">
                    <el-input placeholder="请输入密码" type="text"  v-model="addPromoteForm.qq" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input placeholder="请输入备注" type="textarea"  v-model="addPromoteForm.reamrk" size="small" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowPromoteDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :loading="submitOptLoading" @click="submitAddPromote">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div> -->
    </div>
  </div>
</template>
<script>
import {
  apiPromoterMasterData,
  apiPromoterEditRemark,
  apiAddPromoter,
  apiGetPromotionCostScheme,
  apiPromoterLogin
} from '../../request/api'
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        // timeType: 1,
        token: window.sessionStorage.getItem('token'),
        phone: ''
      },
      timeTypeData: [
        {
          id: 1,
          name: '昨日'
        },
        {
          id: 3,
          name: '本月'
        },
        {
          id: 2,
          name: '上月'
        }
      ],
      schemeList: {
        tb: [],
        tm: [],
        albb: [],
        jd: [],
        vip: [],
        pdd: [],
        dy: []
      },
      pageTotal: 0,
      allCommission: 0,
      linkCommission: 0,
      timeTypeText: {
        1: '昨日',
        2: '上月',
        3: '本月'
      },
      allOrderCount: 0,
      statusData: [
        {
          id: 1,
          name: '正常'
        },
        {
          id: 2,
          name: '禁用'
        }
      ],
      remarkDialog: false,
      editRemark: {
        token: window.sessionStorage.getItem('token'),
        remark: '',
        promoterId: ''
      },
      remarkRules: {
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      submitOptLoading: false,
      isShowPromoteDialog: false,
      addPromoteForm:{
        token: window.sessionStorage.getItem('token'),
        qq: '',
        weChat: '',
        phone: '',
        name: '',
        password: '',
        remark: '',
        tbScheme: '',
        tmScheme: '',
        albbScheme: '',
        jdScheme: '',
        vipScheme: '',
        pddScheme: '',
        dyScheme: '',
        platformType: ''
      },
      shopTypeList: window.sessionStorage.getItem("shopTypeList"),
      addPromoteRules: {
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        qq: [
            { required: true, message: '请输入qq号', trigger: 'blur' }
        ],
        weChat: [
            { required: true, message: '请输入微信号', trigger: 'blur' }
        ],
      },
      isShowScheme: {
        1: false,
        2: false,
        3: false,
        4: false,
        13: false,
        15: false
      }
    };
  },
  created() {
    this.getTableData();
    if(!this.shopTypeList || this.shopTypeList == null){
      this.isShowScheme = {
        1: false,
        2: false,
        3: false,
        4: false,
        13: false,
        15: false
      }
    } else {
      let shopShowTypeArr = this.shopTypeList.split(',')
      for(var i in shopShowTypeArr){
        if(!this.isShowScheme[parseInt(shopShowTypeArr[i])]){
          this.isShowScheme[parseInt(shopShowTypeArr[i])] = true
        }
      }
    }
    apiGetPromotionCostScheme({
      token: window.sessionStorage.getItem('token')
    })
      .then(res => {
        for (let s in res.msg) {
          if(res.msg[s].platform_type == 1){
            this.schemeList.tb.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 2){
            this.schemeList.tm.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 4){
            this.schemeList.albb.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 3){
            this.schemeList.jd.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 13){
            this.schemeList.vip.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 15){
            this.schemeList.pdd.push(res.msg[s])
          }
          if(res.msg[s].platform_type == 20){
            this.schemeList.dy.push(res.msg[s])
          }
        }
      })
      .catch(res => {
      });
  },
  methods: {
    showRemarkDialog(row) {
      this.remarkDialog = true;
      this.editRemark.remark = ''
      this.editRemark.promoterId = row.id
    },
    showDialog(){
      this.addPromoteForm = {
        token: window.sessionStorage.getItem('token'),
        qq: '',
        weChat: '',
        phone: '',
        name: '',
        password: '',
        remark: '',
        tbScheme: '',
        tmScheme: '',
        albbScheme: '',
        jdScheme: '',
        vipScheme: '',
        pddScheme: '',
        platformType: ''
      }
      this.isShowPromoteDialog = true
    },
    submitAddPromote(){
      if(this.isShowScheme[1]){
        if(!this.addPromoteForm.tbScheme) {
          this.$message.error('请先选择淘宝方案');
          return
        }
      }
      if(this.isShowScheme[2]){
        if(!this.addPromoteForm.tmScheme) {
          this.$message.error('请先选择天猫方案');
          return
        }
      }
      if(this.isShowScheme[4]){
        if(!this.addPromoteForm.albbScheme) {
          this.$message.error('请先选择1688方案');
          return
        }
      }
      if(this.isShowScheme[3]){
        if(!this.addPromoteForm.jdScheme) {
          this.$message.error('请先选择京东方案');
          return
        }
      }
      if(this.isShowScheme[13]){
        if(!this.addPromoteForm.vipScheme) {
          this.$message.error('请先选择唯品会方案');
          return
        }
      }
      if(this.isShowScheme[15]){
        if(!this.addPromoteForm.pddScheme) {
          this.$message.error('请先选择拼多多方案');
          return
        }
      }
      this.$refs['addPromoteForm'].validate(valid => {
        if (valid) {
          if (!this.isPhoneNumRight()) {
              return
          }
          this.submitOptLoading = true;
          apiAddPromoter(this.addPromoteForm)
            .then(res => {
              if (res.code == 1) {
                this.$message.success('新增成功');
                this.submitOptLoading = false;
                this.isShowPromoteDialog = false;
                this.$refs['addPromoteForm'].resetFields();
                this.getTableData();
              } else {
                this.submitOptLoading = false;
                this.$message.error(res.msg);
              }
            })
            .catch(res => {});
        } else {
          return false;
        }
      });
    },
    isPhoneNumRight() {
        let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
        if (!this.addPromoteForm.phone) {
          this.$message.error('手机号不能为空');
            return false
        }
        if (!reg.test(this.addPromoteForm.phone)) {
          this.$message.error('请输入正确的手机号');
          this.addPromoteForm.phone = ''
          return false
        }
        return true
    },
    submitRemark() {
      this.$refs['editRemark'].validate(valid => {
        if (valid) {
          this.submitOptLoading = true;
          apiPromoterEditRemark(this.editRemark)
            .then(res => {
              if (res.code == 1) {
                this.$message.success('修改成功');
                this.submitOptLoading = false;
                this.remarkDialog = false;
                this.$refs['editRemark'].resetFields();
                this.getTableData();
              } else {
                this.submitOptLoading = false;
                this.$message.error(res.msg);
              }
            })
            .catch(res => {});
        } else {
          return false;
        }
      });
    },
    getStatusText(row) {
      for (var i in this.statusData) {
        if (this.statusData[i].id == row.status) {
          return this.statusData[i].name;
        }
      }
    },
    forceLogin(row){
      console.log(row)
      apiPromoterLogin({
        'id':row.id,
        'phone':row.phone,
        token: window.sessionStorage.getItem('token')
      })
        .then(res => {
          window.open(res['data']);
          console.log(res)
        })
        .catch(res => {
          this.$hideLoading()
          this.$message.error('数据加载失败')
        });
    },
    getTableData() {
       this.$showLoading()
      apiPromoterMasterData(this.searchForm)
        .then(res => {
          this.tableData = res.msg;
          // this.allCommission = res.allCommission;
          // this.allOrderCount = res.allOrderCount;
          // this.linkCommission = res.linkCommission;
          this.$hideLoading()
        })
        .catch(res => {
          this.$hideLoading()
          this.$message.error('数据加载失败')
        });
    },
    searchData() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.searchForm.limit = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getTableData();
    }
  }
};
</script>
<style lang="less" scoped>

.promote-order-number {
.add-promote-dialog {
  /deep/
    .el-form-item__label {
        width: 120px !important;
    }
  }

}
.commissionText {
  text-align: right;
  color: red;
  margin-bottom: 10px;
}
.add-btn{
  padding: 8px 15px;
  color: #ffffff;
  background: red;
  margin-bottom: 16px;
}
.edit-btn {
  padding: 8px 15px;
  color: #ffffff;
  background: #0e7cee;
}
.login-btn {
  padding: 8px 15px;
  color: #ffffff;
  background: #ee4d0e;
}
.confirm-btn {
  background: #4b95ff;
  color: #ffffff;
}
</style>
